<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <script src="/socket.io/socket.io.js"></script>
    <script src="js/ajax.js"></script>
    <script>    
            window.onload=function(){
                //创建一个io对象
                var oBtn=document.getElementById('btn');
                var oBtn1=document.getElementById('btn1');
                var oWen=document.getElementById('wenben');
                var oUl=document.getElementById('ul');
                var youname=document.getElementById('youname');
                var allnum=document.getElementById('allnum')
                var timer='';
        
                var socket=io();
                var uluser=document.getElementById('uluser');
                oWen.onkeydown=function(ev){
                    var event=ev||event;
                    if(ev.keyCode==13){
                            socket.emit('msg',"<%= username%>  :  "+oWen.value);
                            oWen.value='';   
                    }
               }    
                oBtn.onclick=function(){
                   
                        socket.emit('msg',"<%= username%>  :  "+oWen.value);
                        oWen.value=''; 
                
                       
                }
                

                socket.on('<%= username%>',function(msg){        //接受个人的消息
                    var oLi=document.createElement('li');
                    oLi.innerHTML=msg;
                    oUl.appendChild(oLi);
                });
                 socket.on('huida',function(msg){               //接受服务器的消息
                    var oLi=document.createElement('li');
                    oLi.innerHTML=msg;
                    oUl.appendChild(oLi);
                });

    //退出
                oBtn1.onclick=function(){
                    clearInterval(timer)
                    ajax({
                        url:'/chat',
                        data:{act:'out',name:youname.innerHTML},
                        type:'post',
                        success:function(str){
                            var json=eval("("+str+")");
                            if(json.ok){
                               alert(json.msg);
                               location.replace('/');
                  
                            }else{
                                alert(json.msg);
                            }
                            
                        },
                        error:function(){
                            alert('通信失败！')
                        }
                    })
                }
//检查人数

                timer= setInterval(function(){
                     ajax({
                        url:'/chat',
                        data:{act:'getNum'},
                        type:'post',
                        success:function(str){
                            var json=eval("("+str+")");
                            if(json.ok){
                                 var elem = document.getElementById("uluser");  
                                while(elem.hasChildNodes()){  
                                    elem.removeChild(elem.firstChild);  
                                } 
                               allnum.innerHTML=parseInt(json.msg);
                        
                               for(var i=0;i<json.data.length;i++){
                                    var oLi=document.createElement('li');
                                    oLi.innerHTML=json.data[i];
                                    uluser.appendChild(oLi);
                               }
                                
                            }else{
                                alert(json.msg);
                            }
                            
                        },
                        error:function(){
                            alert('通信失败！')
                        }
                    })
                },1000)
            }
    </script>
    <style>
    #div2{position:absolute;top:30px;left:350px;height:auto;width:200px;background:red;text-align: center}
    #ul li{list-style: none}
    </style>
</head>
<body>
    <div>当前在线人数为&nbsp;&nbsp;<span id='allnum'><%= userNum.length%></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>你的名字是：</span><span id='youname'><%= username%></span></div>
    <div>
         <input type="text"  id='wenben'><button id='btn'>发送</button>
         <button id='btn1'>退出</button>
    </div>
    <div>
        <ul id='ul'>
        </ul>
    </div>
    <div id='div2'>
        <h3>当前在线</h3>
        <ol id='uluser'>
            <li></li>          
        </ol>
    </div>
  
</body>
</html>